// 目标：创建POINTS雪花粒子效果 -- 使用points设置随机点打造星河 -- 打造雪花

import * as THREE from 'three';
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 导入动画库
import gsap from 'gsap';
// 导入快捷界面
import * as dat from 'dat.gui';
// 导入动态纹理加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
import { Clock, LightShadow, MeshBasicMaterial, Plane, Scene } from 'three';

// 设置场景
const scene = new THREE.Scene();

// 设置相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 50);

// 创建渲染器
const renderer = new THREE.WebGL1Renderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// renderer.physicallyCorrectLights = true;

// 导入 坐标系辅助
// const axesHelper = new THREE.AxesHelper(5);
// scene.add(axesHelper);

// 导入轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 设置控制器阻尼
controls.enableDamping = true;

// 设置时钟
let clock = new Clock();

// 分装创建函数
function createPoints(scene, url, size = 0.5) {
  // / 创建几何体
  const particGeo = new THREE.BufferGeometry();
  let num = 5000;
  // 设置缓冲区数组
  const position = new Float32Array(num * 3);
  // 设置顶点颜色
  const colors = new Float32Array(num * 3);
  // 设置顶点
  for (let i = 0; i < num * 3; i++) {
    position[i] = (Math.random() - 0.5) * 100;
    // 随机颜色
    // colors[i] = Math.random();
    // 白色的雪
    colors[i] = 255;
  }
  // 设置bufferGeometry的属性
  particGeo.setAttribute('position', new THREE.BufferAttribute(position, 3));
  particGeo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
  // 导入纹理
  const textureLoader = new THREE.TextureLoader();
  const texture = textureLoader.load(`./textures/particles/${url}.png`);
  // 创建点的材质;
  const PointsMaterial = new THREE.PointsMaterial();
  // 材质加上纹理
  PointsMaterial.map = texture;
  PointsMaterial.alphaMap = texture;
  PointsMaterial.transparent = true;
  PointsMaterial.depthWrite = false;
  PointsMaterial.blending = THREE.AdditiveBlending;
  // 设置点材质的大小
  PointsMaterial.size = size;
  // 设置颜色
  PointsMaterial.color.set('#fff');
  // 是否衰竭
  PointsMaterial.sizeAttenuation = true;
  // 启用顶点颜色设置
  PointsMaterial.vertexColors = true;
  // 创建点
  const points = new THREE.Points(particGeo, PointsMaterial);
  scene.add(points);
  return points;
}

const points1 = createPoints(scene, '1');
const points2 = createPoints(scene, 'xh');
const points3 = createPoints(scene, 'xh');
addToScene(scene, camera);
render();

function addToScene(scene, camera, points) {
  scene.add(camera);
}

function render() {
  controls.update();
  // 旋转雪花
  let time = clock.getElapsedTime();
  points1.rotation.x = time * 0.3;
  points2.rotation.x = time * 0.2;
  points2.rotation.y = time * 0.1;
  points3.rotation.x = time * 0.4;
  points3.rotation.y = -time * 0.5;
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

window.addEventListener('resize', () => {
  console.log('画面变化');
  // 首先更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  // 然后更新摄像机的投影矩阵
  camera.updateProjectionMatrix();
  // 然后更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 屏幕像素比变化设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});
// 随机数取整数
function intToNum(x) {
  let a = Math.random();
  //随机生成的数字 0-1之间
  //乘以6之后 0-7之间
  let b = a * x;
  // 向下取整
  let c = Math.floor(b); //向下取整
  return c;
}

// 动画
// var tl = gsap.timeline({repeat: -1, repeatDelay: 0});
// tl.to(plane.rotation,  { duration: 1, y: 0,});
// tl.to(plane.rotation,{ duration: 1, y: Math.PI/6});
// tl.to(plane.rotation, { duration: 1, y: 0 });
// tl.to(plane.rotation, { duration: 1, y: -Math.PI / 6 });
// tl.to(plane.rotation, { duration: 1, y: 0 });

// 创建gui界面
const gui = new dat.GUI();
let pos = ['x', 'y', 'z'];
var folder = gui.addFolder('光源');
var folder2 = gui.addFolder('球球');
var palette = {
  color1: '#FF0000'
};
folder
  .addColor(palette, 'color1')
  .name(`光源颜色`)
  .onChange(value => {});
